<template>
  <div id="app">
    <div class="input_userInfo">
      <h3>学生信息填报表</h3>
      <div class="input_container">
        <div class="item">姓名：<input type="text" v-model="inputInfo.name" /></div>
        <div class="item">性别：<input type="text" v-model="inputInfo.gender" /></div>
        <div class="item">年龄：<input type="number" v-model="inputInfo.age" /></div>
        <div class="item">语文：<input type="number" v-model="inputInfo.yuwen" /></div>
        <div class="item">数学：<input type="number" v-model="inputInfo.math" /></div>
        <div class="item">英语：<input type="number" v-model="inputInfo.english" /></div>
        <div class="btn" @click="sumbit">提交</div>
      </div>
    </div>
    <div class="card" v-for="(item, index) in userInfo" :key="index">
      <div class="content">
        <div class="avter">
          <img :src="item.srcImg" alt="" />
        </div>
        <span>姓名：{{ item.name }}</span>
        <span>年龄：{{ item.age }}</span>
        <span>性别：{{ item.gender }}</span>
        <span>总分：{{ item.yuwen + item.math + item.english }}</span>
      </div>
      <div @click="toogle(index)" class="shangla" v-if="(item.yuwen < 60) | (item.math < 60) | (item.english < 60) ? false : true">---</div>
      <div class="detailPage" v-show="item.show">
        <div @click="toogle(index)" class="detailBtn">---</div>
        <span>语文：{{ item.yuwen }}</span>
        <span>数学：{{ item.math }}</span>
        <span>英语：{{ item.english }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/index.css'
import { reactive } from 'vue'
export default {
  setup() {
    const inputInfo = reactive({ name: '', age: 0, gender: '', srcImg: require('@/assets/img/1.jpg'), yuwen: 0, math: 0, english: 0, show: false })
    const userInfo = reactive([
      { name: '张三', age: 20, gender: '男', srcImg: require('@/assets/img/1.jpg'), yuwen: 80, math: 80, english: 80, show: false },
      { name: '李四', age: 20, gender: '男', srcImg: require('@/assets/img/2.jpg'), yuwen: 80, math: 50, english: 80, show: false },
      { name: '王五', age: 20, gender: '男', srcImg: require('@/assets/img/3.jpg'), yuwen: 80, math: 100, english: 80, show: false }
    ])
    const toogle = (index) => {
      userInfo[index].show = !userInfo[index].show
      // console.log(this.userInfo.yuwen)
    }
    const sumbit = () => {
      if ((inputInfo.name === '') | (!inputInfo.gender === '')) {
        alert('请填写完整！')
        return
      }
      // 对象深拷贝
      const obj = JSON.parse(JSON.stringify(inputInfo))
      userInfo.push(obj)
      // console.log(this.userInfo)
      // return (this.inputInfo = { name: '', age: 0, gender: '', srcImg: './img/1.jpg', yuwen: 0, math: 0, english: 0, show: false })
    }
    return {
      inputInfo,
      userInfo,
      toogle,
      sumbit
    }
  }
}
</script>

<style></style>
